<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>手风琴效果</title>
    <link rel="stylesheet" href="css/normalize.css"/>
    <style type="text/css">
        body,ul,li,p,h3 {
            margin: 0;
            padding: 0;
        }
        ul {
            list-style: none;
        }
        .wrapper {
            margin: 100px auto;
            width: 942px;
            height: 128px;
            border: 1px solid #ccc;
            overflow: hidden;
        }
        .wrapper li {
            float: left;
            border-right: 1px dashed #cacaca;
        }
        .wrapper li:last-child{
            border-right: none;
        }
        .clearfix{
            zoom: 1;/* IE6/7 */
        }
        .clearfix:after {/*ie6/7无效*/
            content:"";
            display:block;
            clear:both;
        }

        .wrapper li a {
            display: block;
            position: relative;
            width: 156px;
            height: 128px;
            text-decoration: none;
            overflow: hidden;
        }
        .wrapper img {
            position: absolute;
            right: -15px;
            bottom: 0;
            width: 117px;
            height: 72px;
        }
        .wrapper .info {
            position: absolute;
            top: 0;
            left: 0;
            width: 136px;
            padding: 4px 10px;
        }
        .wrapper .info h3 {
            font-size: 14px;
            font-weight: 700;
        }
        .wrapper .info p {
            color: #868686;
            font-size: 12px;
            line-height: 22px;
            overflow: hidden;
        }
        .wrapper .info p.price {
            font-size: 14px;
            font-style: italic;
            color: #fa2a5d;
        }
        .wrapper .info p.price .strong {
            font-weight: bold;
        }
        .wrapper .mask {
            position: absolute;
            top: 0;
            left: 0;
            height: 128px;
            width: 156px;
            opacity: 0.15;
            background: #000;
        }
        .wrapper ul * {
            transition: all linear 0.1s;
        }
        .wrapper li.expand a{
            width: 314px;
        }
        .wrapper li.expand img {
            width: 195px;
            height: 120px;
            right: 0;
            bottom: 0;
        }
        .wrapper li.expand .info {
            width: 290px;
        }
        .wrapper li.expand h3 {
            font-size: 18px;
        }
        .wrapper li.expand .info p {
            font-size: 14px;
            line-height: 28px;
        }
        .wrapper li.expand .info p.price {
            font-size: 16px;
        }
        .wrapper li.expand .mask {
            width: 314px;
            opacity: 0;
        }
    </style>
    <script type="text/javascript">
        function bind(element, eventType, handler){
            if(element.addEventListener){
                element.addEventListener(eventType, handler, false);
            }else if(element.attachEvent){
                element.addEventListener("on"+eventType ,handler);
            }else{
                element["on"+eventType] = handler;
            }
        }
        function mouseoverHandler(e){
            var target = e.target || e.srcElement;
            var outer = document.getElementById("outer");
            var list = outer.getElementsByTagName("li");
            for(var i = 0, len = list.length; i < len; i++){
                list[i].className = "";
            }
            while(target.tagName != "LI" && target.tagName != "BODY"){
                target = target.parentNode;
            }
            target.className = "expand";
        }
        function initList(){
            var outer = document.getElementById("outer");
            var list = outer.getElementsByTagName("li");
            for(var i = 0, len = list.length; i < len; i++){
                bind(list[i],"mouseover",mouseoverHandler);
            }
        }
        window.onload = function(){
            initList();
        };
    </script>
</head>
<body>
    <div class="wrapper" id="outer">
        <ul class="clearfix">
            <li class="expand">
                <a href="#link1">
                    <img src="images/accordion-pic01.jpg"/>
                    <div class="info">
                        <h3 style="color: #f62368">聚美妆</h3>
                        <p>聚美妆1/2周年庆</p>
                        <p class="price"><span class="strong">1</span>折起</p>
                    </div>
                    <span class="mask"></span>
                </a>
            </li>
            <li>
                <a href="#link2">
                    <img src="images/accordion-pic02.jpg"/>
                    <div class="info">
                        <h3 style="color:#ff578a">Baby购</h3>
                        <p>宝宝该换装了，新品抢购</p>
                        <p class="price"><span class="strong">2.5</span>折起</p>
                    </div>
                    <span class="mask"></span>
                </a>
            </li>
            <li>
                <a href="#link3">
                    <img src="images/accordion-pic03.jpg"/>
                    <div class="info">
                        <h3 style="color:#6d3fa7">时装团</h3>
                        <p>时尚春装，清新小潮搭配</p>
                        <p class="price"><span class="strong">1</span>折起</p>
                    </div>
                    <span class="mask"></span>
                </a>
            </li>
            <li>
                <a href="#link4">
                    <img src="images/accordion-pic04.jpg"/>
                    <div class="info">
                        <h3 style="color:#d61939">TV购</h3>
                        <p>补血养颜 就这么简单</p>
                        <p class="price"><span class="strong">2.6</span>折起</p>
                    </div>
                    <span class="mask"></span>
                </a>
            </li>
            <li>
                <a href="#link5">
                    <img src="images/accordion-pic05.jpg"/>
                    <div class="info">
                        <h3 style="color:#6f9400">聚新鲜</h3>
                        <p>最纯正的泰国香米</p>
                        <p class="price"><span class="strong">5</span>折起</p>
                    </div>
                    <span class="mask"></span>
                </a>
            </li>
        </ul>
    </div>
</body>
</html>